<!--案件管理-->
<template>
<div class="page-box">
    <div class="search-box">
        <el-form :inline="true" :model="searchForm" size="medium">
            <el-form-item label="">
                <el-select v-model="searchForm.caseType" placeholder="案件类型">
                <el-option label="巡查案件" value="1"></el-option>
                <el-option label="信访案件" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="searchForm.keyword" placeholder="关键字搜索"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="searchForm.timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
			<el-form-item label="">
                <el-select v-model="searchForm.region" placeholder="行政区划">
                <el-option label="孝南区" value="1"></el-option>
                <el-option label="孝昌县" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
        <el-table
            :data="tableData"
            border
            size="medium"
            height="calc(100vh - 315px)"
            style="width: 100%">
            <el-table-column align="center" label="序号" type="index"  width="60"></el-table-column>
			<el-table-column align="center" label="类型" prop="caseType" width="120"></el-table-column>
            <el-table-column align="center" label="发现时间" prop="findTime" width="160"></el-table-column>
            <el-table-column align="center" label="地点" prop="address" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="案件描述" prop="caseDesc" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="立案时间" prop="buildTime" width="160"></el-table-column>
			<el-table-column align="center" label="行政区划" prop="region" width="120"></el-table-column>
            <el-table-column align="center" label="操作" width="80">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            searchForm:{
                caseType:'',
                keyword:'',
				timeRange:[],
				region:''
            },
            tableData:[
				{ caseType:'巡查案件', findTime: '2020-08-18 16:26:26', address:'孝昌县邹岗镇', caseDesc: '非法采砂', buildTime: '2020-08-19 16:29:26', region:'孝昌县' },
				{ caseType:'信访案件', findTime: '2020-08-18 16:26:26', address:'孝昌县邹岗镇', caseDesc: '非法采砂', buildTime: '2020-08-19 16:29:26', region:'孝昌县' },
            ],
            pageSize:10,
            pageNo:1,
            total:16
        }
    },
    created(){},
    methods: {
        // 表格数据操作
        handleEdit(index,val){},
        handleDelete(index,val){
            console.log(val)
            this.$confirm('已选项目【'+val.projectName+'】, 是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('删除成功!');
            }).catch(() => {});
        },
        // 分页操作
        handleSizeChange(val){
            this.pageSize=val;
        },
        handleCurrentChange(val){
            this.pageNo=val;
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box{
    height: 100%;
    overflow: hidden;
}
</style>